<!DOCTYPE html>
<!-- 设置网页的语言 -->
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>前端开发课程设计</title>
    <!-- 网页在浏览器上的图标 -->
    <link type="text/html" rel="icon" href="image/logo.png">
    <!-- 引入jQuery -->
    <script src="lib/jquery-3.7.1.js"></script>
    <!-- 引入bootstrap的css -->
    <link type="text/css" rel="stylesheet"
          href="lib/bootstrap-3.4.1/css/bootstrap.css">
    <!-- 引入bootstrap的js -->
    <script src="lib/bootstrap-3.4.1/js/bootstrap.js"></script>
    <style>
        body {
            margin: 0;
            padding: 0;
            background-image: url("image/school.jpg");
            background-repeat: no-repeat;
            background-position: center;
            background-size: cover;
            background-attachment: fixed;
        }
        div.row-msg {
            display: flex;
        }
        p {
            font-size: 24px;
            color: rgb(80, 78 ,78);
            font-weight: 500;
            margin: 5px 0;
        }
        p.zuo {
            flex: 1;
            text-align: right;
            margin-right: 30px;
        }
        p.you,div.you {
            flex: 1.09;
            margin-left: 30px;
        }
    </style>
    <script>
        function toLogin() {
            window.location.href = "login.html";
        }
    </script>
</head>
<body>
    <h1 style="text-align: center; font-size: 42px;
    font-weight: bold; color: rgb(80, 78 ,78);
    letter-spacing: 8px; margin-top: 20px">
        前端开发课程设计
    </h1>

    <div>
        <div class="row-msg">
            <p class="zuo">班级</p>
            <p class="you">20214126</p>
        </div>

        <div class="row-msg">
            <p class="zuo">学号</p>
            <p class="you">123123131</p>
        </div>

        <div class="row-msg">
            <p class="zuo">姓名</p>
            <p class="you">卧龙</p>
        </div>

        <div class="row-msg">
            <p class="zuo">头像</p>
            <div class="you">
                <img alt="图片不存在" src="image/logo.png"
                     style="width: 50px; height: 50px; border-radius: 50%">
            </div>
        </div>
    </div>

    <div style="text-align: center; margin-top: 20px">
        <button type="button" class="btn btn-success btn-lg" onclick="toLogin()">进入项目</button>
    </div>
</body>
</html>